/**
 * @File   : index.js
 * @Author : xue.xiaoBing
 * @Date   : 2021/5/14
 * @Desc   : 教师页面
 **/

import moment from 'moment';
import React, {Component} from "react";
import {Row, Col, Tabs, Button, Space, Divider, Modal, Input, Calendar, Badge,} from "antd";

import FireSvg from "src/assets/svgs/火.svg";
import TestSvg from "src/assets/svgs/直播.svg";
import NewsSvg from "src/assets/svgs/新闻.svg";
import VideoSvg from "src/assets/svgs/视频.svg";

import TestImag from "src/assets/images/userLogo.jpg";
import HomeHeader from "src/components/head/homeHeader/HomeHeader";


import "./index.sass";

const {TabPane} = Tabs;

class Teacher extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 'ordinary',
      modalStatus: false,
      value: moment('2021-05-25'),
      selectedValue: moment('2021-05-25'),
    }
  }

  changeCourses = (data) => {
    this.setState({
      current: data
    })
  };

  showModal = () => {
    this.setState({
      modalStatus: true,
    })
  };

  handleCancel = () => {
    this.setState({
      modalStatus: false,
    })
  };

  getListData = (value) => {
    let listData;
    console.log(value.date())
    switch (value.date()) {
      case 8:
        listData = [
          {type: 'warning', content: '3条内容'},
        ];
        break;
      default:

    }
    return listData || [];
  };


  onSelect = value => {
    alert(value)
  };

  dateCellRender = (value) => {
    const listData = this.getListData(value);
    return (
      <div className="events" style={{margin:'0 auto', position:'relative', textAlign:'center'}}>
        {listData.map((item, data) => (
            <Badge key={data} color="#f50" text={item.content} />
         ))}
      </div>
    );
  };

  render() {
    const {current, modalStatus} = this.state;
    return (
      <div>
        <div>
          <HomeHeader/>
        </div>
        <div className={'teachTaskTabs'}>
          <Tabs defaultActiveKey="1" centered>
            <TabPane tab="在教课程" key="1">
              <Row className={'onlineCourses'}>
                <Col span={18}>
                  <Space size={20}>
                    <Button type="text" className={current === 'ordinary' ? 'active' : null}
                            onClick={() => this.changeCourses('ordinary')}>普通课程</Button>
                    <Button type="text" className={current === 'live' ? 'active' : null}
                            onClick={() => this.changeCourses('live')}>直播课程</Button>
                    <Button type="text" className={current === 'recorded' ? 'active' : null}
                            onClick={() => this.changeCourses('recorded')}>录播课程</Button>
                    <Button type="text" className={current === 'test' ? 'active' : null}
                            onClick={() => this.changeCourses('test')}>在线试卷</Button>
                    <Button type="text" className={current === 'exercise' ? 'active' : null}
                            onClick={() => this.changeCourses('exercise')}>在线练习</Button>
                  </Space>
                </Col>
                <Col span={6}>
                  <Button type="text" style={{backgroundColor: '#43bc60', float: 'right'}}
                          onClick={this.showModal}>创建课程</Button>
                </Col>
              </Row>
              {current === 'ordinary' && <Space direction={'vertical'} style={{width: '100%'}} size={20}>
                <Row style={{width: '70%', margin: '0px auto', boxShadow: '0 0 5px gray', borderRadius: '5px'}}>
                  <Col span={24} style={{margin: ''}}>
                    <div style={{
                      background: 'green',
                      width: '80px',
                      height: '35px',
                      lineHeight: '35px',
                      top: '5px',
                      zIndex: '100',
                      textAlign: 'center',
                      color: 'white',
                      borderTopRightRadius: '16px',
                      borderBottomRightRadius: '16px',
                      position: 'absolute'
                    }}>
                      已发布
                    </div>
                    <Row style={{backgroundColor: 'white', height: '120px', width: '100%'}} align={'middle'}>
                      <Col span={5} style={{padding: '20px', width: '100%'}}>
                        <img src={TestImag} alt=""
                             style={{height: '80px', width: '100%', margin: '0 auto', borderRadius: '5px'}}/>
                      </Col>
                      <Col span={12}>
                        <Row align={'middle'}>
                          <Col span={12}>
                            <h2 style={{margin: '5px'}}>测试课程</h2>
                            <p style={{margin: '5px', color: '#43bc60'}}>免费</p>
                          </Col>
                          <Col span={12}>
                            <Row style={{float: 'right', width: '100%'}}>
                              <Col span={11} offset={1} style={{textAlign: 'center'}}>
                                <p style={{margin: '5px'}}>课程计划</p>
                                <p style={{margin: '5px', textAlign: 'center', color: '#43bc60'}}>12</p>
                              </Col>
                              <Col span={1}>
                                <Divider type="vertical"
                                         style={{width: '1px', height: '100%', backgroundColor: 'rgba(0,0,0,.5)'}}/>
                              </Col>
                              <Col span={11} style={{textAlign: 'center'}}>
                                <p style={{margin: '5px'}}>课程学员</p>
                                <p style={{margin: '5px', textAlign: 'center', color: '#43bc60'}}>20</p>
                              </Col>
                            </Row>
                          </Col>
                        </Row>
                      </Col>
                      <Col span={6}>
                        <Space style={{float: 'right'}}>
                          <Button style={{border: '1px solid #43bc60', color: '#43bc60'}} size={'large'}
                                  href={'/exam/manageExam/1/1'}>管理课程</Button>
                          <Button size={'large'}>查看课程</Button>
                        </Space>
                      </Col>
                    </Row>
                  </Col>
                </Row>
                <Row style={{width: '70%', margin: '0px auto', boxShadow: '0 0 5px gray', borderRadius: '5px'}}>
                  <Col span={24} style={{margin: ''}}>
                    <div style={{
                      background: 'red',
                      width: '80px',
                      height: '35px',
                      lineHeight: '35px',
                      top: '5px',
                      zIndex: '100',
                      textAlign: 'center',
                      color: 'white',
                      borderTopRightRadius: '16px',
                      borderBottomRightRadius: '16px',
                      position: 'absolute'
                    }}>
                      待发布
                    </div>
                    <Row style={{backgroundColor: 'white', height: '120px', width: '100%'}} align={'middle'}>
                      <Col span={5} style={{padding: '20px', width: '100%'}}>
                        <img src={TestImag} alt=""
                             style={{height: '80px', width: '100%', margin: '0 auto', borderRadius: '5px'}}/>
                      </Col>
                      <Col span={12}>
                        <Row align={'middle'}>
                          <Col span={12}>
                            <h2 style={{margin: '5px'}}>测试课程</h2>
                            <p style={{margin: '5px', color: 'red'}}>￥ 199.9</p>
                          </Col>
                          <Col span={12}>
                            <Row style={{float: 'right', width: '100%'}}>
                              <Col span={11} offset={1} style={{textAlign: 'center'}}>
                                <p style={{margin: '5px'}}>课程计划</p>
                                <p style={{margin: '5px', textAlign: 'center', color: '#43bc60'}}>12</p>
                              </Col>
                              <Col span={1}>
                                <Divider type="vertical"
                                         style={{width: '1px', height: '100%', backgroundColor: 'rgba(0,0,0,.5)'}}/>
                              </Col>
                              <Col span={11} style={{textAlign: 'center'}}>
                                <p style={{margin: '5px'}}>课程学员</p>
                                <p style={{margin: '5px', textAlign: 'center', color: '#43bc60'}}>20</p>
                              </Col>
                            </Row>
                          </Col>
                        </Row>
                      </Col>
                      <Col span={6}>
                        <Space style={{float: 'right'}}>
                          <Button style={{border: '1px solid #43bc60', color: '#43bc60'}} size={'large'}>管理课程</Button>
                          <Button size={'large'}>查看课程</Button>
                        </Space>
                      </Col>
                    </Row>
                  </Col>
                </Row>
                <Row style={{width: '70%', margin: '0px auto', boxShadow: '0 0 5px gray', borderRadius: '5px'}}>
                  <Col span={24} style={{margin: ''}}>
                    <div style={{
                      background: 'gray',
                      width: '80px',
                      height: '35px',
                      lineHeight: '35px',
                      top: '5px',
                      zIndex: '100',
                      textAlign: 'center',
                      color: 'white',
                      borderTopRightRadius: '16px',
                      borderBottomRightRadius: '16px',
                      position: 'absolute'
                    }}>
                      已下线
                    </div>
                    <Row style={{backgroundColor: 'white', height: '120px', width: '100%'}} align={'middle'}>
                      <Col span={5} style={{padding: '20px', width: '100%'}}>
                        <img src={TestImag} alt=""
                             style={{height: '80px', width: '100%', margin: '0 auto', borderRadius: '5px'}}/>
                      </Col>
                      <Col span={12}>
                        <Row align={'middle'}>
                          <Col span={12}>
                            <h2 style={{margin: '5px'}}>测试课程</h2>
                            <p style={{margin: '5px', color: 'red'}}>￥ 199.9</p>
                          </Col>
                          <Col span={12}>
                            <Row style={{float: 'right', width: '100%'}}>
                              <Col span={11} offset={1} style={{textAlign: 'center'}}>
                                <p style={{margin: '5px'}}>课程计划</p>
                                <p style={{margin: '5px', textAlign: 'center', color: '#43bc60'}}>12</p>
                              </Col>
                              <Col span={1}>
                                <Divider type="vertical"
                                         style={{width: '1px', height: '100%', backgroundColor: 'rgba(0,0,0,.5)'}}/>
                              </Col>
                              <Col span={11} style={{textAlign: 'center'}}>
                                <p style={{margin: '5px'}}>课程学员</p>
                                <p style={{margin: '5px', textAlign: 'center', color: '#43bc60'}}>20</p>
                              </Col>
                            </Row>
                          </Col>
                        </Row>
                      </Col>
                      <Col span={6}>
                        <Space style={{float: 'right'}}>
                          <Button style={{border: '1px solid #43bc60', color: '#43bc60'}} size={'large'}>管理课程</Button>
                          <Button size={'large'}>查看课程</Button>
                        </Space>
                      </Col>
                    </Row>
                  </Col>
                </Row>
              </Space>}
              {
                current === 'live' &&
                <Row style={{width: '70%', margin: '0px auto', textAlign: 'center'}}>
                  <div style={{textAlign: 'center', width: '100%', minHeight: '100px'}}>
                    <p style={{
                      color: '#43bc60',
                      vertical: 'middle',
                      top: '50%',
                      position: 'relative',
                      transform: 'translateY(-50%)'
                    }}>你还没有在教的直播课程,赶快去创建吧!</p>
                  </div>
                </Row>
              }
              {
                current === 'recorded' &&
                <Row style={{width: '70%', margin: '0px auto', textAlign: 'center'}}>
                  <div style={{textAlign: 'center', width: '100%', minHeight: '100px'}}>
                    <p style={{
                      color: '#43bc60',
                      vertical: 'middle',
                      top: '50%',
                      position: 'relative',
                      transform: 'translateY(-50%)'
                    }}>你还没有在教的录播课程,赶快去创建吧!</p>
                  </div>
                </Row>
              }
              {
                current === 'test' &&
                <Row style={{width: '70%', margin: '0px auto', textAlign: 'center'}}>
                  <div style={{textAlign: 'center', width: '100%', minHeight: '100px'}}>
                    <p style={{
                      color: '#43bc60',
                      vertical: 'middle',
                      top: '50%',
                      position: 'relative',
                      transform: 'translateY(-50%)'
                    }}>你还没有在教的在线考试,赶快去创建吧!</p>
                  </div>
                </Row>
              }
              {
                current === 'exercise' &&
                <Row style={{width: '70%', margin: '0px auto', textAlign: 'center'}}>
                  <div style={{textAlign: 'center', width: '100%', minHeight: '100px'}}>
                    <p style={{
                      color: '#43bc60',
                      vertical: 'middle',
                      top: '50%',
                      position: 'relative',
                      transform: 'translateY(-50%)'
                    }}>你还没有在教的在线练习,赶快去创建吧!</p>
                  </div>
                </Row>
              }
            </TabPane>
            <TabPane tab="教学课表" key="2">
              <div style={{width: '70%', margin: '30px auto', textAlign: 'center'}}>
                <Calendar dateCellRender={this.dateCellRender} onSelect={this.onSelect} style={{padding: '40px'}}/>
              </div>
            </TabPane>
            <TabPane tab="在教班级" key="3">
              Content of Tab Pane 3
            </TabPane>
            <TabPane tab="学员问答" key="4">
              Content of Tab Pane 3
            </TabPane>
            <TabPane tab="下线批阅" key="5">
              Content of Tab Pane 3
            </TabPane>
            <TabPane tab="教学资料库" key="6">
              Content of Tab Pane 3
            </TabPane>
            <TabPane tab="题库" key="7">
              Content of Tab Pane 3
            </TabPane>
          </Tabs>
        </div>
        <Modal title="创建课程" visible={modalStatus} footer={null}
               maskClosable={false} style={{minWidth: '900px'}} centered={true}>
          <Row style={{width: '100%'}}>
            <Space direction={'vertical'} size={20}>
              <Row style={{width: '100%'}}>
                <spanp style={{borderLeft: '5px solid #43bc60', paddingLeft: '15px'}}>选择类型</spanp>
              </Row>
              <Row style={{width: '100%'}} justify={'space-between'} gutter={[16, 0]}>
                <Col span={6}>
                  <Button style={{width: '100%', backgroundColor: '#43bc60', minHeight: '250px', borderRadius: '5px'}}>
                    <Row style={{width: '98%', textAlign: 'center', margin: '0 4%', height: '100%'}}>
                      <img src={TestSvg} alt="" style={{width: '80px', margin: '0px auto'}}/>
                      <span style={{color: 'white', width: '100%'}}>普通课程</span>
                      <Divider style={{backgroundColor: 'white', margin: '5px 0', height: '2px'}}/>
                      <span style={{color: 'white', whiteSpace: 'normal'}}>支持视频、图文等各种格式，支持作业、笔记等多个学习工具的课程。</span>
                    </Row>
                  </Button>
                </Col>
                <Col span={6}>
                  <Button style={{width: '100%', backgroundColor: 'gray', minHeight: '250px', borderRadius: '5px'}}>
                    <Row style={{width: '98%', textAlign: 'center', margin: '0 4%', height: '100%'}}>
                      <img src={VideoSvg} alt="" style={{width: '80px', margin: '0px auto'}}/>
                      <span style={{color: 'white', width: '100%'}}>直播课程</span>
                      <Divider style={{backgroundColor: 'white', margin: '5px 0', height: '2px'}}/>
                      <span style={{color: 'white', whiteSpace: 'normal'}}>支持视频、图文等各种格式，支持作业、笔记等多个学习工具的课程。</span>
                    </Row>
                  </Button>
                </Col>
                <Col span={6}>
                  <Button style={{width: '100%', backgroundColor: 'gray', minHeight: '250px', borderRadius: '5px'}}>
                    <Row style={{width: '98%', textAlign: 'center', margin: '0 4%', height: '100%'}}>
                      <img src={NewsSvg} alt="" style={{width: '80px', margin: '0px auto'}}/>
                      <span style={{color: 'white', width: '100%'}}>录播课程</span>
                      <Divider style={{backgroundColor: 'white', margin: '5px 0', height: '2px'}}/>
                      <span style={{color: 'white', whiteSpace: 'normal'}}>支持视频、图文等各种格式，支持作业、笔记等多个学习工具的课程。</span>
                    </Row>
                  </Button>
                </Col>
                <Col span={6}>
                  <Button type={'outline'} style={{
                    width: '100%',
                    backgroundColor: 'gray',
                    minHeight: '250px',
                    borderRadius: '5px',
                  }}>
                    <Row style={{width: '98%', textAlign: 'center', margin: '0 4%', height: '100%'}}>
                      <img src={FireSvg} alt="" style={{width: '80px', margin: '0px auto'}}/>
                      <span style={{color: 'white', width: '100%'}}>测试课程</span>
                      <Divider style={{backgroundColor: 'white', margin: '5px 0', height: '2px'}}/>
                      <span style={{color: 'white', whiteSpace: 'normal'}}>支持视频、图文等各种格式，支持作业、笔记等多个学习工具的课程。</span>
                    </Row>
                  </Button>
                </Col>
              </Row>
              <Row style={{width: '100%'}} align={'middle'}>
                <Col span={3}>
                  <span style={{borderLeft: '5px solid #43bc60', paddingLeft: '15px', paddingTop: '3px'}}>课程标题</span>
                </Col>
                <Col span={21}>
                  <Input placeholder={'请输入课题标题!'} style={{width: '98%'}}/>
                </Col>
              </Row>
              <Row style={{width: '100%'}} justify={'center'}>
                <Space>
                  <span>如何创建课程?</span><Button type={'primary'}>创建</Button><Button type={'text'} danger
                                                                                  onClick={this.handleCancel}>取消</Button>
                </Space>
              </Row>
            </Space>
          </Row>
        </Modal>
      </div>
    )
  }
}

export default Teacher